<template>
	<div class="upFile">
		<Upload 
            action="/admin/upload/file"
            :data="updata"
            :show-upload-list="false"
            :format="['doc','xls','ppt','xlsx']"
            :max-size="maxsize"
            multiple
            type="drag"
            name="file"
            :on-progress="onProgress"
            :on-success="handleSuccess"
            :on-error="handleError"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            >
            <IButton type="ghost" icon="ios-cloud-upload-outline">上传文件</IButton>
        </Upload>
        <IProgress  :percent="percent" if="percent>0" hide-info ></IProgress>
	</div>
</template>
<script>
	import Progress  from 'iview/src/components/progress';
    import Upload  from 'iview/src/components/upload';
    import IButton  from 'iview/src/components/button';

	export default{
		props :{
            area : {
                type : String,
                default : 'file'
            },
            callback :{
            	type : Function,
            }
        },
        components:{
            'IProgress' :Progress,
            Upload,
            IButton,
        },
        data () {
            return {
                updata : {
                    _token : window.document.getElementsByTagName('meta')['csrf-token'].getAttribute('content'),
                    fileArea : this.area,
                },
                files : [],
                maxsize : 5120,
                percent : 0,
            }
        },
        methods: {
            //上传成功
            handleSuccess (res, file) {
                this.percent = 0;
                if(res.code==1){
                    this.$Notice.error({
                        title: '图片上传失败',
                        desc: '原因：'+res.msg
                    });
                    return false;
                }
                this.callback(res.data);
            },
            //上传错误
            handleError(error,file,fileList){
                this.$Notice.error({
                    title: '图片上传失败',
                    desc: '原因：'+error
                });
                this.percent = 0;
            },
            //文件格式错误
            handleFormatError (file) {
                this.$Notice.error({
                    title: '图片上传失败',
                    desc: "只允许上传'.xls','.xlsx','.doc','.ppt' 类型文件"
                });
                this.percent = 0;
            },
            //上传最大大小
            handleMaxSize (file) {
                this.$Notice.error({
                    title: '图片上传失败',
                    desc: "图片过大,不能超过"+this.maxsize/1024+'mb'
                });
                this.percent = 0;
            },
            //上传中
            onProgress(event, file, fileList){
                this.percent = event.percent;
            },
        },
        created:function(){
            
        },
        mounted:function(){

        },
    }
</script>